<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>js-core JavaScript framework • примеры использования</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="preview/style.css" />
<script type="text/javascript">
(function() {
	if(this.opera && opera.version() > 9.5) {
		var link = document.createElement("link");
		link.rel = "stylesheet";
		link.type = "text/css";
		link.href = "preview/opera.css";
		document.getElementsByTagName("head")[0].appendChild(link);
	}
})();
</script>
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="preview/ie.css" /><![endif]-->
</head>
<body>
<div id="container">
	<div id="header">
		<h1><a href="http://www.js-core.ru/">js-core JavaScript framework</a></h1>
		<span>Версия 3a</span>
		<ul>
			<li class="web-site"><a href="http://www.js-core.ru/" title="Веб-сайт проекта js-core.ru" tabindex="1">Веб-сайт</a></li>
			<li class="downloads"><a href="http://code.google.com/p/js-core/downloads/list" title="Различные версии и сборки js-core, расширения и модули, документация"  tabindex="2">Скачать</a></li>
			<li class="documentation"><a href="doc/index.html" title="Подробное описание методов, изменения последней версии" tabindex="3">Документация</a></li>
			<li class="svn"><a href="http://code.google.com/p/js-core/source/browse/" title="Subversion — централизованная система управления версиями" tabindex="4">SVN</a></li>
		</ul>
	</div>
	<div id="content">
		<div class="example">
			<h2>Поиск первого дочернего элемента</h2>
			<button tabindex="5">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;div id=&quot;test&quot;&gt;</span><code class="tag"><span>&lt;span&gt;</span><code class="text"><span>Текст</span></code></code><code class="tag"><span>&lt;span&gt;</span><code class="text"><span>Текст</span></code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;test&quot;)</code>.<code>first(&quot;span&quot;)</code>.<code>text(&quot;Пример&quot;)</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «test»</li>
				<li>Поиск первого дочернего &lt;span&gt;</li>
				<li>Изменение текста</li>
			</ol>
		</div>
		<div class="example">
			<h2>Поиск дочерних элементов</h2>
			<button tabindex="6">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;ul id=&quot;list&quot;&gt;</span><code class="tag"><span>&lt;li&gt;</span><code class="text">Текст</code></code><code class="tag"><span>&lt;li&gt;</span><code class="text">Текст</code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;list&quot;)</code>.<code>children()</code>.<code>each(&quot;addClass&quot;, &quot;some&quot;)</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «list»</li>
				<li>Поиск всех дочерних элементов</li>
				<li>Добавление CSS-классса «some» найденным элементам</li>
			</ol>
		</div>
		<div class="example">
			<h2>Поиск в&nbsp;глубину</h2>
			<button tabindex="7">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;fieldset id=&quot;some&quot;&gt;</span><code class="tag">&lt;form&gt;<code class="tag">&lt;div&gt;<code class="tag"><span>&lt;span&gt;</span><code class="text">Текст</code></code></code><code class="tag">&lt;div&gt;<code class="tag"><span>&lt;span&gt;</span><code class="text">Текст</code></code></code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;some&quot;)</code>.<code>descendants(&quot;span&quot;)</code>.<code>get(1)</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «some»</li>
				<li>Поиск в&nbsp;глубину всех&nbsp;дочерних &lt;span&gt;</li>
				<li>Получение второго в&nbsp;коллекции &lt;span&gt;</li>
			</ol>
		</div>
		<div class="example">
			<h2>Изменение атрибутов</h2>
			<button tabindex="8">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;p id=&quot;addr&quot;&gt;</span><code class="tag"><span>&lt;span&gt;</span><code class="text"><span>Текст</span></code></code><code class="tag"><span>&lt;span&gt;</span><code class="text"><span>Текст</span></code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;addr&quot;)</code>.<code>last()</code>.<code>attr(&quot;title&quot;, &quot;Подсказка&quot;)</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «addr»</li>
				<li>Поиск последнего дочернего элемента</li>
				<li>Изменение атрибута «title»</li>
			</ol>
		</div>
		<div class="example">
			<h2>Изменение стилей</h2>
			<button tabindex="9">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;fieldset&gt;</span><code class="tag"><span>&lt;div&gt;</span><code class="text"><span>Текст</span></code></code><code class="tag"><span>&lt;div id=&quot;tooltip&quot;&gt;</span><code class="text"><span>Текст</span></code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;tooltip&quot;)</code>.<code>prev(&quot;div&quot;)</code>.<code>css(&quot;color&quot;, &quot;#f00&quot;)</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «tooltip»</li>
				<li>Поиск предыдущего &lt;div&gt;</li>
				<li>Изменение цвета текста</li>
			</ol>
		</div>
		<div class="example">
			<h2>Создание элементов</h2>
			<button tabindex="10">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;body&gt;</span><code class="tag"><span>&lt;div&gt;</span><code class="text"><span>Текст</span></code></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(document.body)</code>.<code>prepend(&quot;h1&quot;)</code>.<code>text(&quot;Пример&quot;)</code>;</pre>
			</div>
			<ol>
				<li>Создание обёртки для&nbsp;«document.body»</li>
				<li>Добавление нового узла &lt;h1&gt;</li>
				<li>Добавление текста «Пример»</li>
			</ol>
		</div>
		<div class="example">
			<h2>Использование AJAX</h2>
			<button tabindex="11">Старт</button>
			<div class="dom">
				<label>DOM</label>
				<code class="tag"><span>&lt;pre id=&quot;license&quot;&gt;</span><code class="text"><span>Текст</span></code></code> </div>
			<div class="code">
				<label>JavaScript</label>
				<pre><code>$(&quot;license&quot;)</code>
    .<code>text(&quot;Загрузка…&quot;)</code>
        .<code>load({url: &quot;MIT-LICENSE.txt&quot;})</code>;</pre>
			</div>
			<ol>
				<li>Поиск элемента с&nbsp;идентификатором «license»</li>
				<li>Изменение «Текст» на&nbsp;«Загрузка…»</li>
				<li>Загрузка текста лицензии из&nbsp; файла с&nbsp;помощью AJAX-запроса</li>
			</ol>
			<div class="result">
				<label>Результат</label>
				<pre><code>Текст</code></pre>
			</div>
		</div>
		<p><span>Об&nbsp;остальных возможностях и&nbsp;методах JavaScript фреймворка «<a href="http://www.js-core.ru/" title="Веб-сайт проекта">js-core</a>» и&nbsp;способах работы с&nbsp;ними можно&nbsp;узнать из&nbsp;<a href="doc/index.html">документации</a>.</span></p>
	</div>
	<div id="footer"><span class="vcard">&copy;&nbsp;<a class="url fn n" href="http://www.designwizard.ru/" title="Перейти на сайт автора"><span class="given-name">Дмитрий</span>&nbsp;<span class="family-name">Коробкин</span></a>,&nbsp;2009</span></div>
</div>
<script type="text/javascript" src="framework/js-core.js"></script>
<script type="text/javascript" src="modules/ajax/js-core.ajax.js"></script>
<script type="text/javascript" src="preview/application.js"></script>
</body>
</html>
